import React, {useState} from "react";
import katex from 'katex';
import trim from 'lodash/trim';

export default function Kate(props) {
    const [lateStr, setLateStr] = useState('$$\\left| a \\right|=\\left| b \\right|$$')
    const str = '-\\frac{{{3}^{2}}{{a}^{2}}b}{2}';
    const test = '$$0$$，$$-1$$<p>一袋大米的标准重量为$$\\text{10kg}$$．把一袋重$$10\\text{.5kg}$$的大米记为$$+0\\text{.5kg}$$，则一袋重$$9\\text{.8kg}$$的大米记为（  ）．</p>'
    // setLateStr(test);
    const test1 = '$$\\frac{\\sqrt{3}}{5}$$';
    // 公式问题1
    const str1 = '$$\\frac{a}{|a|}+\\frac{|b|}{b}+\\frac{c}{|c|}+\\frac{|abc|}{abc}$$';

    function handleLateX(str) {
        const reg = /\$\$(.*?)\$\$/g;
        return str.replace(reg, function ($1, $2) {
            console.log('$1=======', $1)
            console.log('$2=======', $2)
            return renderLatex($2)
        })
    }

    function renderLatex(str) {
        return katex.renderToString(str, {
            "displayMode": true,
            "leqno": false,
            "fleqn": true,
            "throwOnError": true,
            "errorColor": "#cc0000",
            "strict": "warn",
            "output": "html",
            "trust": true,
        });
    }

    return (<div>
        <h2 className="mb-3">kateX解析组件</h2>
        <div className="border-bottom"/>
        <div className="row mt-5">
            <div className="col-md-5 border-right">
                <strong>输入公式</strong>
                <textarea
                    className="form-control"
                    rows={6}
                    value={lateStr}
                    onChange={(event) => setLateStr(event.target.value)}
                />
            </div>
            <div className="col-md-7">
                <strong>输出显示</strong>
                <div className="d-flex text-left text-info border" style={{minHeight: '300px'}}
                     dangerouslySetInnerHTML={{
                         __html: handleLateX(lateStr)
                     }}
                >
                </div>
            </div>
        </div>
    </div>)
}